<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <a-form
        :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
        :wrapper-col="{ md: { span: 22 }, sm: { span: 20 }, xs: { span: 24 } }"
      >
        <a-row :gutter="24">
          <a-col :md="24" :sm="24" :xs="24">
            <a-form-item>
              <div class="fs-16 fw-bolder">等级设置</div>
            </a-form-item>
            <a-form-item label="等级数量">
              <a-select
                style="width: 60%"
                show-search
                optionFilterProp="label"
                :options="gradeOptions"
                allow-clear
                placeholder="请选择"
                v-model:value="from.count"
                @change="change1"
              />
            </a-form-item>
            <a-form-item label="升级方式" @change="change2">
              <a-radio-group v-model:value="from.up_type">
                <a-radio :value="1">人工升级</a-radio>
                <a-radio :value="2">累计消费金额自动升级</a-radio>
                <a-radio :value="3">累计积分值自动升级</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col
            :md="24"
            :sm="24"
            :xs="24"
            v-if="from.up_type == 2 || from.up_type == 3"
          >
            <a-form-item>
              <div class="fs-16 fw-bolder">降级设置</div>
            </a-form-item>
            <a-form-item label="销售退货" @change="change3">
              <a-radio-group v-model:value="from.refund_down">
                <a-radio :value="1"
                  >不降级（扣减累计消费金额和累计积分，保持原等级不变）</a-radio
                >
                <a-radio :value="2"
                  >自动降级（扣减累计消费金额和累计积分，按当前规则更新等级）</a-radio
                >
              </a-radio-group>
            </a-form-item>
            <a-form-item label="取消订单">
              <a-radio-group v-model:value="value">
                <a-radio :value="1"
                  >自动降级（扣减累计消费金额和累计积分，按当前规则更新等级）</a-radio
                >
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24" :xs="24">
            <vxe-table ref="xTable" :data="tableData" v-if="show">
              <vxe-column field="level" title="会员等级" width="200">
                <template #default="{ row }">
                  <div>{{ row.level }}级</div>
                </template>
              </vxe-column>
              <vxe-column field="name" title="等级名称">
                <template #default="{ row }">
                  <a-input
                    placeholder="请输入"
                    type="text"
                    v-model:value="row.name"
                  />
                </template>
              </vxe-column>
              <vxe-column
                field="total_consum"
                title="累计消费金额自动升级"
                v-if="from.up_type == 2"
              >
                <template #default="{ row }">
                  <a-input
                    placeholder="请输入"
                    type="number"
                    v-model:value="row.total_consum"
                  />
                </template>
              </vxe-column>
              <vxe-column
                field="total_points"
                title="累计积分值自动升级"
                v-if="from.up_type == 3"
              >
                <template #default="{ row }">
                  <a-input-number
                    v-model:value="row.total_points"
                    :min="0"
                    :max="99999999999999"
                    :precision="0"
                    :formatter="limitNumber"
                    :parser="limitNumber"
                    style="width: 200px"
                  />
                </template>
              </vxe-column>
            </vxe-table>
          </a-col>
          <a-col :md="24" :sm="24" :xs="24">
            <a-space class="margin-top-30">
              <a-button type="primary" class="ele-btn-icon" @click="save"
                ><span>保存</span></a-button
              >
              <a-button class="btn" @click="logShow = true"
                ><span>操作日志</span></a-button
              >
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <log v-if="logShow" v-model:visible="logShow" />
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import zbTable from './components/table.vue';
  import log from './components/log.vue';
  import {
    member_level_get_setting,
    member_level_setting
  } from '@/api/member/get_setting';

  const { push } = useRouter();

  const internalInstance = getCurrentInstance();
  const gradeOptions = ref([
    {
      label: '2个',
      value: 2
    },
    {
      label: '3个',
      value: 3
    },
    {
      label: '4个',
      value: 4
    },
    {
      label: '5个',
      value: 5
    },
    {
      label: '6个',
      value: 6
    },
    {
      label: '7个',
      value: 7
    },
    {
      label: '8个',
      value: 8
    },
    {
      label: '9个',
      value: 9
    }
  ]);
  const data = ref({});
  const show = ref(false);
  const logShow = ref(false);
  const value = ref(1);
  const tableData = ref([]);
  const level = ref([]);
  const from = reactive({
    count: '',
    up_type: 1,
    refund_down: '',
    level: []
  });
  const xTable = ref(null);

  onMounted(() => {
    member_level_get_setting().then((res) => {
      data.value = res;
      level.value = res.level;
      from.count = res.conf.count;
      from.up_type = res.conf.up_type;
      from.refund_down = res.conf.refund_down;
      if (res.level && res.level.length > 0) {
        res.level.forEach((item) => {
          tableData.value.push({
            key: item.level,
            level: item.level,
            name: item.name,
            total_consum: item.total_consum,
            total_points: item.total_points
          });
        });
      }
      show.value = true;
    });
  });

  const change1 = (e) => {
    if (Number(e) > tableData.value.length) {
      let arr = [];
      let num = tableData.value.length;
      for (var i = 0; i < Number(e) - tableData.value.length; i++) {
        arr.push({
          key: num + 1,
          level: num + 1,
          name: '',
          total_consum: '',
          total_points: ''
        });
        num++;
      }
      tableData.value = [...tableData.value, ...arr];
    } else {
      let num = tableData.value.length - Number(e);
      let arr = tableData.value;
      arr.splice(tableData.value.length - num, num);
      tableData.value = [...arr];
    }
    from.count = e;
  };

  const change2 = (e) => {};

  const change3 = (e) => {};
  const save = () => {
    from.level = [];
    tableData.value.forEach((item) => {
      if (item.name) {
        from.level.push(item);
      }
    });
    console.log(from);
    member_level_setting(from)
      .then((res) => {
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };

  /* 限制数字输入框只能输入整数 */
  const limitNumber = (value) => {
    let v = null;
    switch (typeof value) {
      case 'string':
        v = isNaN(+value) ? 0 : value.replace(/\./g, '');
        break;
      case 'number':
        v = isNaN(value) ? 0 : String(value).replace(/\./g, '');
        break;
      default:
        v = 0;
    }
    return v;
  };
</script>
